<script setup lang="ts">
import {onMounted, ref, getCurrentInstance,onBeforeUnmount} from "vue";
import {getHotProductAll, getWebsiteConfig, getBannerAll} from "@/api/homeApi.ts";
import {getNewsAll} from "@/api/newsApi.ts";

import {Vue3Marquee} from 'vue3-marquee';

const {proxy} = getCurrentInstance();
import productImg from '../../assets/images/product.png';
import mineImg from '../../assets/images/mine.png';

const banners = ref([]);
const fetchBannerData = () => {
  getBannerAll().then(res => {
    banners.value = res.data;
  })
}

const hotProducts = ref([]);
const fetchHotProductData = () => {
  getHotProductAll().then(res => {
    hotProducts.value = res.data;
  })
}

const websiteConfig = ref([]);
const fetchWebsiteConfigData = () => {
  getWebsiteConfig().then(res => {
    websiteConfig.value = res.data;
  })
}

const news = ref([]);
const fetchNewsData = () => {
  getNewsAll().then(res => {
    news.value = res.data;
  })
}

const intervalId = ref(0);
const startUpdating = () => {
  intervalId.value = setInterval(() => {
    fetchHotProductData();
  }, 5000);
}

onMounted(() => {
  fetchBannerData();
  fetchWebsiteConfigData();
  fetchNewsData();
  fetchHotProductData();
  startUpdating();
});

// 在组件卸载之前清除定时器
onBeforeUnmount(() => {
  if (intervalId.value) {
    clearInterval(intervalId.value);
  }
});
</script>

<template>
  <div class="hot">
    <router-link :to="{name:'productDetail',params:{id:item.id}}"
                 v-for="item in hotProducts" :class="['hot-item',item.class]">
      <span style="color: #686969" class="not-translate">{{ item.product_name }}</span>
      <span>{{ item.price }}</span>
      <span>{{ item.chajia }}</span>
    </router-link>
  </div>

  <div class="options">
    <div class="notice">
      <van-icon name="volume-o"/>
      <Vue3Marquee class="tips-box">
        {{ websiteConfig.notice }}
      </Vue3Marquee>
    </div>
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" lazy-render :show-indicators="false">
        <van-swipe-item v-for="item in banners">
          <a :href="item.link_url">
            <van-image width="100%" height="100%" :src="proxy.$baseURL + item.img_url"/>
          </a>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="quick-into">
      <router-link :to="{name:'product'}">
        <van-image width="30px" height="30px" :src="productImg"/>
        <span>{{ $t('home.product') }}</span>
      </router-link>
      <router-link :to="{name:'mine'}">
        <van-image width="30px" height="30px" :src="mineImg"/>
        <span>{{ $t('home.mine') }}</span>
      </router-link>
    </div>
  </div>

  <div class="news">
    <router-link :to="{name:'newsDetail',params:{id:newItem.url}}" v-for="newItem in news" class="news-item">
      <span style="color: #99A6C4">{{ newItem.showTime }}</span>
      <span>{{ newItem.summary }}</span>
      <span
          style="border: 2px solid #41AC75;color: #41AC75;width: auto; align-self: flex-start;padding: 5px;font-size: 14px;">{{
          newItem.mediaName
        }}</span>
      <van-image width="100%" height="200px" :src="newItem.base64Image"/>
    </router-link>
  </div>
</template>

<style scoped lang="less">
@import "../../less/index.less";
</style>